<template>
  <div>

  <!-- 头部组件 -->
  <header-nav></header-nav>

  <!-- 轮播图 -->
  <div class="banner">
      <div class="imgs">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item,index)  in imgs" :key="index">
            <img :src="item.i" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>




  <div class="user" v-for="(item,index) in foods" :key="index">
    <div v-if="item.type == 1">
    <div class="user-img">
      <img :src="item.r.a.p" alt="">
      <div class="name">{{item.r.a.n}}</div>
      <div class="lv">LV.{{item.r.a.lvl}}</div>
    </div>
     <router-link :to="'/details?id='+ item.r.id">
    <div class="food-img">
      <img :src="item.r.img" alt="">
      <p>已有{{item.r.pw}}人学做这个菜谱<span>></span></p>
    </div>
     </router-link>
    <div class="Collection">
      <div class="Collection-all">
      <div class="Collection-img" v-for="value in item.r.collect_users" :key="value.id">
        <img :src="value.p" alt="">
      </div>
      <div class="Collection-person">
        {{item.r.collect_count_text}}
      </div>
      </div>
      <div class="iconfont icon-shoucangjia" @click="cang(index)"></div>
    </div>
    <div class="food-name">
      <p>{{item.r.n}}</p>
    </div>
    </div>
    <div v-else></div>
  </div>



  
  </div>
</template>

<script>
import headerNav from "../components/base/headerNav.vue"
import {getHomeRecommended} from "../api/recommend"
export default {
  data(){
    return {
      imgs:[],
      foods:[]
    }
  },
  methods:{
    cang(index){
      let information = []
      for(var i=0;i<this.foods.length;i++){
        var mation = {
            id:this.foods[index].r.id,
            name:this.foods[index].r.n,
            photo:this.foods[index].r.img,
            number:this.foods[index].r.fc,
            userp:this.foods[index].r.a.p,
            usern:this.foods[index].r.a.n,
            userlv:this.foods[index].r.a.lvl,
        }
      }
      information.push(mation)
        console.log(information);
      console.log(this.foods[0].r.id);
       window.localStorage.setItem("informations",information);
      console.log(index);
    }
  },
  created(){
    getHomeRecommended().then(data=>{
      this.foods = data.result.list;
      this.imgs = data.result.banner
      console.log(this.foods);
    })
  },
    components:{
        headerNav,
    }
}
</script>

<style lang="less">
.banner {
  &::before {
    content: "";
    display: block;
    height: 90px;
    position: absolute;
    width: 100%;
    z-index: -1;
  }
  // margin-top: 110px;
  position: relative;
  margin-bottom: 15px;
  .imgs {
    position: relative;
    left: 0px;
    right: 0px;
    top: 0px;
    margin: auto;
    width: 100%;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
}


  .user{
    margin-bottom: 30px;
    .user-img{
      display: flex;
      align-items: center;
      margin-bottom:10px;
      img{
        width: 32px;
        height: 32px;
        margin-left: 13px;
        border-radius: 50%;
      }
      .name{
        margin-left: 7px;
        font-size: 12px;
        line-height: 12px;
        color: #2A2A2A;
      }
      .lv{
        margin-left: 7px;
        font-size: 8px;
        line-height: 8px;
        color: #CBA43B;
      }
    }
    .food-img{
      width: 100%;
      // height: 300px;
      position: relative;
      margin-bottom: 15px;
      img{
         width: 100%;
        height: 100%;
      }
      p{
        position: absolute;
        bottom: 10px;
        left: 13px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: white;
        font-size: 12px;
        line-height:12px;
        span{
          display: block;
          margin-left: 195px;
        }
      }
    }
    .Collection{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom:25px ;
        .Collection-all{
          display: flex;
          align-items: center;
          margin-left:13px;
          .Collection-img{
            width: 15px;
            height: 15px;
            img{
             width: 100%;
              border-radius: 50%;
            }
          }
          .Collection-person{
            margin-left: 10px;
            font-size: 10px;
            line-height: 10px;
            color: #0D0D0D;
          }
        }
        .iconfont{
          margin-right: 12px;
          font-size: 20px;
          line-height: 20px;
          color: #000000;
        }
    }
    .food-name{
      font-size: 14px;
      line-height: 18px;
      color: #292929;
       margin:0px 13px;
      display: -webkit-box;           
    -webkit-box-orient: vertical;  
    -webkit-line-clamp: 2;         
    overflow: hidden;
    }
  }
</style>